<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/elementui/index.css}">
    <script th:src="@{/elementui/vue.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>

</head>
<body>
<div id="app">
        <div>
<!--            设置背景图片铺满-->
            <div style="width: 100%; height: 100%; overflow: hidden; " class="bgImg" th:style="'background:url(/img/bg.jpg'+') 0 0 no-repeat;background-size: cover;'">
                <div style="width: 500px; height: 100vh; background-color:rgba(9, 50, 113 ,0.2); border-radius: 10px;
        margin: 0 auto;">

                    <div style="width: 260px; margin: 0 auto; padding-top: 210px">
                        <div class="item" style="font-size: 20px; color: white">登录</div>
                        <div class="item">
                            <input type="text" class="inputItem" placeholder="请输入手机号" v-model="member.phoneNumber">
                        </div>
                        <div class="item">
                            <input type="password" class="inputItem" placeholder="请输入密码" v-model="member.password">
                        </div>
                        <div class="item">
                            <button class="loginBtn" @click="login">登录</button>
                        </div>
                        <div style="padding: 10px 0; text-align: right">
                            <span style="cursor: pointer; color: lightgreen; margin-left: 10px" @click="goRegister">注册</span>
                        </div>
                    </div>
                </div>
            </div>


        </div>

</div>

</body>
<script>
    new Vue({
        el:"#app",
        data:{
            reset: {},
            dialogFormVisible: false,
            code: '',
            count: 0,
            member: {},
        },
        created() {

        },
        methods: {
            goRegister() {
                window.location.href="register.html"
            },
            preReset() {
                this.dialogFormVisible = true
                this.reset = {}
            },

            login() {
                if (!this.member.phoneNumber) {
                    this.$message({
                        type: "warning",
                        message: "请输入手机号"
                    })
                    return;
                }
                if (!this.member.password) {
                    this.$message({
                        type: "warning",
                        message: "请输入密码"
                    })
                    return;
                }
                let par = {
                    phoneNumber : this.member.phoneNumber,
                    password : this.member.password
                }

                axios.post("/member/login", par).then(res => {
                    console.log(res)
                    if (res.data.code == 20000) {
                        this.$message({
                            type: "success",
                            message: res.data.msg
                        })
                        sessionStorage.setItem("loginUser", JSON.stringify(res.data.data))

                        window.location.href = "/"

                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg
                        })
                    }
                })
            }
        }
    })
</script>
<style scoped>
    .bgImg {
        /*background: url("../static/img/bj.jpg") no-repeat;*/

        background-size: 100% 100vh;
    }
    html,body{
        height: 100%;
    }
    .item {
        text-align: center;
        padding: 10px 0
    }

    .loginBtn {
        background: forestgreen;
        border-radius: 5px;
        color: white;
        width: 100%;
        padding: 10px;
        cursor: pointer
    }

    .inputItem {
        width: 100%;
        padding: 10px;
        border-radius: 5px;
    }
</style>
</html>